<span class="debug"></span>
<div style="padding-right: 22px;padding-left: 20px;"
         id="id-deal-jqxgrid"
         >
    <table style="margin-bottom: 20px">
        <tr>
            <td>Hãy chọn ngày bất kỳ trong tháng</td>
            <td>
                <div style='float: left; margin-top: 0px;margin-bottom: 0px' id='jqxDateTimeInput'></div>
            </td>
        </tr>
    </table>
    
    <div id="jqxWidget" style="position: relative;">
        <div id="jqxgrid"></div>
        
    </div>
    
</div>
<script>
    $(document).ready(function () {
        reportFRM.init();
    });
    var reportFRM = (function () {
        //Adding event listeners

        function _addEventListeners() {
            $('#jqxDateTimeInput ').jqxDateTimeInput('setDate', new Date('{{{{$configs["year"]}}}}', {{$configs["month"]}}-1, 1)); 
            $('#jqxDateTimeInput').bind('valuechanged', function (event) {
                var date = event.args.date;
                var getDate= new Date($('#jqxDateTimeInput').jqxDateTimeInput('getDate')); 
                $("h1.page-tit").html("Báo cáo tổng hợp doanh thu theo tháng ("+ getDate.getFullYear() +"/"+(getDate.getMonth()+1)+")");
                //$(".debug").html(getDate.getMonth()+1+":"+getDate.getFullYear());
                $("#jqxgrid").jqxGrid( { source: _getsource(getDate.getMonth()+1,getDate.getFullYear()) });
            });
        };
        //Creating all page elements which are jqxWidgets
        function _createElements() {
            var theme=reportFRM.config.theme;
            $("#jqxDateTimeInput").jqxDateTimeInput({ width: '270px', height: '25px', theme: theme ,formatString: 'Y'});
            
        };
        //Creating the demo window
        function _createWindow() {
            var theme=reportFRM.config.theme;
            
        };
        function _getsource(month,year){
            var source ={
                datatype: "json",
                datafields: [
                        { name: 'ProductName', type: 'string'},
                        { name: 'Supplier',type:'string'},
                        { name: 'Amount',type:'string'},
                        { name: 'UnitPrice',type:'float'},
                        { name: 'TotalQuantity',type:'string'},
                        { name: 'TotalOrderCash',type:'float'}

                ],
                url: '{{base_url()}}admin-planners/report/jqgrid_data_synthesis_month/'+month+'/'+year,
                filter: function(){
                        $("#jqxgrid").jqxGrid('updatebounddata');
                },
                sort: function(){
                        // update the grid and send a request to the server.
                        $("#jqxgrid").jqxGrid('updatebounddata');
                },
                root: 'Rows',
                beforeprocessing: function(data){		
                        source.totalrecords = data[0].TotalRows;					
                }
            };	

            var dataadapter = new $.jqx.dataAdapter(source, {
                            loadError: function(xhr, status, error)
                            {
                                $('#window-error').jqxWindow('setContent',"<b>Status</b>:"+xhr.status+"<br/><b>ThrownError</b>:"+error+"<br/>");
                                $('#window-error').jqxWindow('open');
                            }
                    }
            );
            return dataadapter;
        }
        //create jqgrid
        function _createGrid() {
            var theme=reportFRM.config.theme;
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {	
                width:'920px',
                source: _getsource('{{$configs["month"]}}','{{$configs["year"]}}'),//dataadapter,
                theme: theme,
                showstatusbar: true,
                statusbarheight: 40,
                showaggregates: true,
                autoheight: true,
                ready: function () {
                },
                rendergridrows: function(obj)
                {
                    return obj.data;    
                },
                columns: [
                        { text: 'Sản phẩm'  , datafield: 'ProductName' ,minwidth:120 , aggregates: ['count'] },
                        { text: 'Nhà cung cấp'    , datafield: 'Supplier' ,minwidth:120},
                        { text: 'Số lượng'      , datafield: 'Amount' ,width:100 ,cellsalign: 'right'},
                        { text: 'Giá gốc'     , datafield: 'UnitPrice' ,minwidth:100 , cellsalign: 'right',cellsformat: 'c0' },
                        { text: 'Đã bán' , datafield: 'TotalQuantity' ,width:80 ,cellsalign: 'right' },
                        { text: 'Tổng tiền'        , datafield: 'TotalOrderCash' ,width:100,cellsalign: 'right' ,cellsformat: 'c0',aggregates: ['sum', 'avg'] }
                ]
            });

        };
        return {
            config: {
                dragArea: null,
                theme: 'classic'
            },
            setting: function () {
                $('#window-setting').jqxWindow('open');
            },
            init: function () {
                //Creating all jqxWindgets except the window
                _createElements();
                _createWindow();
                //Adding jqxGrid
                _createGrid();
                //Attaching event listeners
                _addEventListeners();
            }
        };
    } ());

</script>